<template>
    <div class="container">
        <div class="public-filter">
            <div style="display: flex">
                <custom-filter @onSubmit="handleInitTable" @onReset="handleResetTable" hideEnabled></custom-filter>
            </div>

            <div class="multi-container multi-action">
                <a-button type="primary" danger @click="handleAdd">单个回收</a-button>
                <a-button type="primary" danger @click="handleImport">批量回收</a-button>
            </div>
        </div>

        <div class="container-data">
            <!-- <yl-multi-button
                class="multi-action"
                :selectedRowKeys="selectedRowKeys"
                @add="handleAdd"
                :hideAdd="true"
            ></yl-multi-button> -->
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :row-key="setRowKey"
                :pagination="pagination"
                :loading="loading"
                class="dept-data__table-table"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
                <template #merchantCount="{ record }">
                    <span>{{ record.merchantCount }} / {{ record.normalMerchantCount }} / {{ record.freezeMerchantCount }}</span>
                </template>
                <template #storeCount="{ record }">
                    <span>{{ record.storeCount }} / {{ record.normalStoreCount }} / {{ record.freezeStoreCount }}</span>
                </template>
                <template #customAction="{ record }">
                    <a-button class="action-btn" type="danger" size="small" @click.stop="handRecord(record)">
                        <template #icon>
                            <MenuOutlined />
                        </template>
                    </a-button>
                </template>
            </a-table>
        </div>

        <yl-dept-model
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :dept="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dept-model>
        <recoveryModel
            :visible="recoveryModelVisible"
            :loading="confirmLoading"
            :dept="selectedRow"
            @cancle="recoveryModelhandleCancle"
        ></recoveryModel>

        <importModel
            :visible="importVisible"
            :loading="importLoading"
            :title="importTitle"
            @cancle="handleImportCancle"
            @submit="handleimportSubmit"
        ></importModel>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';

import { message, Modal } from 'ant-design-vue';
import { MenuOutlined } from '@ant-design/icons-vue';
import ylMultiButton from '@/components/ylMultiButton.vue';
import customFilter from './components/tableFilter.vue';
import ylDeptModel from './components/deptModel.vue';
import recoveryModel from './components/recovery/recoveryModel.vue';
import columns from './dataColumns';
import useTables from './recoverydataTables';
import { deleteEmptyKey } from '@/utils/help';
import { addDeviceStock } from '@/api/device';
import importModel from '@/components/importModel.vue';
export default defineComponent({
    name: 'department',
    components: {
        customFilter,
        ylMultiButton,
        ylDeptModel,
        MenuOutlined,
        recoveryModel,
        importModel,
    },
    setup() {
        const { t } = useI18n();
        // 搜索条件
        let {
            tableQuery,

            selectedRow,
            selectedRowKeys,
            visible,
            selectModels,
            recoveryModelVisible,
            getIndustryData,
        } = useTables;

        const state = reactive({
            title: computed(() => (selectedRow.value.merchantCode ? t('yl.recoveryTitle') : t('yl.recoveryTitle'))),
            confirmLoading: false, // 弹窗按钮的loading
        });
        const importModel = reactive({
            importVisible: false,
            importLoading: false, // 弹窗按钮的loading
            importTitle: '设备批量回收',
        });
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;
        onMounted(() => {
            getIndustryData(tableQuery);
        });
        const recoveryModelhandleCancle = () => {
            recoveryModelVisible.value = false;
        };
        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            tableQuery = Object.assign({}, tableQuery, { ...query });
            getIndustryData(tableQuery);
        };

        // 重置
        const handleResetTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery = Object.assign({}, tableQuery, { ...query });
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getIndustryData(tableQuery);
        };
        // 新增、编辑
        const handleSubmit = (dept: NormalObj) => {
            state.confirmLoading = true;
            deleteEmptyKey(dept);
            const msg = dept.id ? t('yl.editAgent') : t('yl.addAgent');
            const realRequest = dept.id ? addDeviceStock(dept) : addDeviceStock(dept);
            return realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };
        // 批量导入
        const handleImport = () => {
            importModel.importVisible = true;
        };
        const handleImportCancle = () => {
            importModel.importVisible = false;
        };
        const handleimportSubmit = () => {
            importModel.importVisible = false;
        };
        return {
            ...toRefs(state),
            ...toRefs(importModel),
            t,
            columns,
            ...useTables,
            handleInitTable,
            handleResetTable,
            setRowKey,
            handleSubmit,
            recoveryModelhandleCancle,
            handleImport,
            handleImportCancle,
            handleimportSubmit,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
}
.multi-container {
    @include flex;
    padding-bottom: 20px;
    .ant-btn {
        height: auto;
        margin-right: 10px;
        padding: $width2 $width10;
        font-size: 12px;
    }
    .modify {
        color: $white;
        background-color: $green;
        border-color: $green;
    }
    .export {
        color: $white;
        background-color: $yellow;
        border-color: $yellow;
    }
}
</style>
